<?php
require './model-db-connection/DBConnection.inc';
?>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-color:#f5f5f5;
            }
            .form-signin
            {
                max-width: 330px;
                padding: 15px;
                margin: 0 auto;
            }
            .form-signin .form-control
            {
                position: relative;
                font-size: 16px;
                height: auto;
                padding: 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            .form-signin .form-control:focus
            {
                z-index: 2;
            }
            .form-signin input[type="text"]
            {
                margin-bottom: -1px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
            .form-signin input[type="password"]
            {
                margin-bottom: 10px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
            .account-wall
            {
                margin-top: 80px;
                padding: 40px 0px 20px 0px;
                background-color: #ffffff;
                box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
            }
            .login-title
            {
                color: #555;
                font-size: 22px;
                font-weight: 400;
                display: block;
            }
            .profile-img
            {
                width: 96px;
                height: 96px;
                margin: 0 auto 10px;
                display: block;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
            }
            .select-img
            {
                border-radius: 50%;
                display: block;
                height: 75px;
                margin: 0 30px 10px;
                width: 75px;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
            }
            .select-name
            {
                display: block;
                margin: 30px 10px 10px;
            }

            .logo-img
            {
                width: 96px;
                height: 96px;
                margin: 0 auto 10px;
                display: block;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
            }
        </style>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4 col-md-offset-4">
                    <div class="account-wall">
                        <div id="my-tab-content" class="tab-content">
                            <div class="tab-pane active" id="login">
                                <img class="profile-img" src="assets/images/login_icon.png"
                                     alt="">
                                <form class="form-signin" action="" method="" id="form-signin">
                                    <input type="text" name="username" id="username" class="form-control" placeholder="Username" required autofocus>
                                    <input type="password" name="password" id="password" class="form-control" placeholder="Password" required>
                                    <input type="button" id="submit" class="btn btn-lg btn-default btn-block" value="Sign In" />
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="assets/js/jquery.js" ></script>

    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // alert(login_data);
            $("#password").keyup(function (event) {
                if (event.keyCode == 13) {
                    if ($("#username").val() == "" || $("#password").val() == "") {
                        alert("กรุณาใส่ username หรือ password ให้ถูกต้อง");
                    } else {
                        var login_data = $("#form-signin").serialize();
                        var jqxhr = $.post("model/com.swiss.mooh.controller/VerifyUsernameAndPassword.php?" + login_data);
                        jqxhr.success(function (data) {
                            if (data == 200) {
                                window.location.assign("welcome_page.php");
                            } else {
                                alert("Username หรือ password ไม่ถูกต้อง");
                            }
                        });
                        jqxhr.error(function () {
                            alert("ไม่สามารถเชื่อมต่อกับ Server ได้");
                        });
                    }
                }
            });
            $("#submit").click(function () {
                if ($("#username").val() == "" || $("#password").val() == "") {
                    alert("กรุณาใส่ username หรือ password ให้ถูกต้อง");
                } else {
                    var login_data = $("#form-signin").serialize();
                    var jqxhr = $.post("model/com.swiss.mooh.controller/VerifyUsernameAndPassword.php?" + login_data);
                    jqxhr.success(function (data) {
                        if (data == 200) {
                            window.location.assign("welcome_page.php");
                        } else {
                            alert("Username หรือ password ไม่ถูกต้อง");
                        }
                    });
                    jqxhr.error(function () {
                        alert("ไม่สามารถเชื่อมต่อกับ Server ได้");
                    });
                }
            });
        });
    </script>
</html>
